<template>
	
    <div class="leftMenu" @mouseleave="setLeftItemIn" >
        <ul>
			
            <li class="leftMenuList" 
                v-for="item in leftMenuList" 
                :key="item.id" 
                @mouseenter="setLeftItemOn(),getLeftItemList(item.id)"
               
                >
              <span style="margin-left:20px">{{item.name}}</span>
              <i class="el-icon-arrow-right" style="float:right;margin-right:15px"></i>
            </li>
			
        </ul>
		
        <ul class="leftItemList" v-show="leftItemListIfShow" @mouseleave="setLeftItemIn" :style="{width: itemNum +'px'}" >
            <li v-for="item in leftItemList" :key="item.id" class="leftItemList2">
				<router-link :to="{path:'/goods/details',query:{id:item.id}}" >
                <div style="box-shadow:  1px 3px 5px rgba(0, 0, 0, .12);">
                <img class="leftItemImg" :src="$target+item.imgPath" />
                </div>
                <div style="float: left; margin-left:60px;margin-top:-35px">{{item.name}}</div>
				</router-link>
            </li>
        </ul>
		
    </div>
	
</template>

<script>
export default {
    name: 'leftMenu',
    data(){
        return{
            leftMenuList:'',
            leftItemList:[],
            leftItemListIfShow: true,
            itemNum:''
        }
    },
    methods:{
        setLeftItemOn(){
            if(this.leftItemListIfShow === false){
                this.leftItemListIfShow=true;
            }
        },
        setLeftItemIn(){
            if(this.leftItemListIfShow === true){
                this.leftItemListIfShow=false;
            }
        },
        getLeftItemList(id){
            this.$axios.post(`/api/menu/getLeftItemList/${id}`)
            .then((res)=>{
                this.leftItemList=res.data.data;
                let num = this.leftItemList.length/5;
                this.itemNum= Math.ceil(num)*300;
                return this.itemNum;
            })
        }
    },
    created(){
        this.$axios.post("/api/menu/getLeftMenu")
        .then((res)=>{
            this.leftMenuList=res.data.data;
        }).catch((err)=>{
            return Promise.reject(err);
        })
    }
    
}
</script>

<style>
.leftItemImg{
    width: 50px;
    height: 50px;
}
.leftItemList2{
    box-shadow:  0 1px 5px rgba(0, 0, 0, .12);
    font-size:20px;
    line-height:100%;
    width: 280px;
    margin: 10px 10px;
}
.leftItemList{
    /* 弹性布局设置 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 按垂直方向排列 */
    flex-wrap:wrap;
    margin-left: 250px;
    margin-top: -330px;
    height: 400px;
    background-color: rgb(247, 243, 243);
    z-index: 200;
    position: absolute;
    box-shadow:  0 3px 5px rgba(0, 0, 0, .12);
}
.leftMenu{
    width: 250px;
    height: 380px;
    background-color: #606266;
    position: absolute;
    margin-top: -400px;
    margin-left: 0px;
    padding: 10px 0;
    position: relative;
}
.leftMenuList{
    width: 230px;
    height: 20px;
    background-color: #606266;
    padding: 10px;
    color: rgb(247, 240, 240);
}
.leftMenuList:hover{
    background-color: orangered;
}
</style>